試試看 Liveview

我們做一個被做爛的計數器吧呵呵
我們繼續在~H""" """ 裡面加上該呈現的 html，
這個計數器應該是有夠小，我們就寫在這邊就好

  def render(assigns) do
    ~H"""
    我的第n個計數器
    <div>
      <h1>0</h1>
      <button>加一</button>
      <button>減一</button>
      <button>歸零</button>
    </div>
    """
  end

長這樣

liveview 這邊跟 GenServer 用法有一點像，我們的狀態是統一的
首先我們會需要做 mount 方法

  def mount(_params, _session, socket) do
    {:ok, assign(socket, :number, 0)}
  end

params 跟 session 我們這邊暫時不會用到，沒有用到的變數，可以在前面加底線代表忽略他
我們在用 assign 把 number 與他的初始值放進 socket 裡面
放完之後我們就可以把 number 綁在我們的頁面上

  def render(assigns) do
    ~H"""
    我的第n個計數器
    <div>
      <h1><%= @number %></h1>
      <button>加一</button>
      <button>減一</button>
      <button>歸零</button>
    </div>
    """
  end

這個時候如果我直接調整 number 的值，並存檔，他也會馬上反映在網頁上
不過我們想要的是按按鈕改變，

  def render(assigns) do
    ~H"""
    我的第n個計數器
    <div>
      <h1><%= @number %></h1>
      <button phx-click="加ㄧ">加一</button>
      <button>減一</button>
      <button>歸零</button>
    </div>
    """
  end

我們馬上來幫加一按鈕綁上動作，我們用 phx-click 在這個按鈕上增加一個方法來接他

  def handle_event("加一", _value, socket) do
    {:noreply, assign(socket, :number, socket.assigns.number + 1)}
  end

就這樣 計數器的數字就會增加了
我們來看看紀錄狀態的 socket 長怎樣

在加一這邊把它印出來好了

  def handle_event("加一", _value, socket) do
    IO.inspect(type(socket))
    {:noreply, assign(socket, :number, socket.assigns.number + 1)}
  end

#Phoenix.LiveView.Socket<
  assigns: %{__changed__: %{}, flash: %{}, live_action: :index, number: 1},
  endpoint: CardWeb.Endpoint,
  id: "phx-FqmhzEUZvexvGAOH",
  parent_pid: nil,
  root_pid: #PID<0.1447.0>,
  router: CardWeb.Router,
  transport_pid: #PID<0.1441.0>,
  view: CardWeb.PageLive.Index,
  ...

可以看到這個跟我們之前一直在操作的 Game 有點像，
只是我們會動到的東西大部分都在 assigns 裡面，
他也提供我們 assign 方法可以直接放東西進去。

來做好其他按鈕吧!

  def render(assigns) do
    ~H"""
    我的第n個計數器
    <div>
      <h1><%= @number %></h1>
      <button phx-click="加一">加一</button>
      <button phx-click="減一">減一</button>
      <button phx-click="歸零">歸零</button>
    </div>
    """
  end

  def handle_event("減一", _value, socket) do
    {:noreply, assign(socket, :number, socket.assigns.number - 1)}
  end

  def handle_event("歸零", _value, socket) do
    {:noreply, assign(socket, :number, 0)}
  end

成果 gif

沒花什麼功夫就弄好了。

在開始真的把遊戲裝上去之前，明天先來把 Tailwind css 裝好吧。